<template>
  <div class="partnerMain">
    <!-- 登录授权后 -->
    <div v-if="userLogin && authorized">
      <partner v-if="$route.name==='partner'"/>
      <deals v-if="$route.name==='deals'"/>
    </div>
    <!-- 登录页 -->
    <div class="banner" v-else>
      <div class="bannerWrap">
        <div class="mainView flexb" style="margin-top: -150px;">
          <div class="newdexTip">
            <div class="mainTitle" :style="$store.state.app.language==='en' ? 'font-size: 26px;' : ''">{{$t('index.bannerTitle')}}</div>
            <div class="subTitle">{{$t('index.bannerSubTitle2')}}</div>
            <div class="subTitle" style="padding-top: 60px;">
              <el-button class="bannerBtn"
              @click="handleAuthorized"
              v-if="userLogin">{{ $t('order.reports') }}</el-button>
              <button class="bannerBtn"
              @click="handleWalletPermission"
              v-else>{{$t('public.signIn')}}</button>
            </div>
          </div>
          <img src="@/assets/img/partner/bannerImg.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 公用JS
import { authorized } from '@/utils/validate';
// 数据表格组件
import Partner from './components/Partner'
import Deals from './components/Deals'


export default {
  name: 'admin',
  data() {
    return {
      loading: false,
      userLogin: false,
      authorized: false, // 是否授权
    };
  },
  watch: {
    '$store.state.app.language': function change() {
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        if (!val) {
          this.userLogin = false;
          return;
        }
        this.userLogin = true;
        this.handleAuthorized();
      },
      deep: true,
    },
  },
  components: {
    Partner, // 合作伙伴-渠道方分成查询
    Deals // 订单查询
  },
  computed: {
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    const scatterApp = this.$store.state.app.scatter;
    if (scatterApp && scatterApp.identity) {
      this.userLogin = true;
    }
    const token = localStorage.getItem('Frontend-Token');
    this.authorized = false;
    if (token) {
      this.authorized = true;
    }
  },
  beforeDestroy() {
  },
  methods: {
    /**
     * 钱包授权
     */
    handleWalletPermission() {
      this.$emit('listenWalletLogin', true);
    },
    // 授权操作
    handleAuthorized() {
      authorized(this, (code, result) => {
        if (code === 'error') { // 授权错误
          this.authorized = false;
          console.log(result); // eslint-disable-line
          return;
        }
        this.authorized = true;
      });
    },

    // 查询渠道分成对账明细
    // handleGetData() {
    //   const accountInfo = localStorage.getItem('accountInfo');
    //   const params = {
    //     currPage: 1,
    //     pageSize: 10,
    //     orderByName: '',
    //     orderByType: '',
    //     chain: '',
    //     accountNo: JSON.parse(accountInfo).account,
    //     direction: '',
    //     beginDate: '',
    //     endDate: '',
    //     channelCode: '',
    //     dealRole: ''
    //   }
    //   this.$http.post('/channelDividend/queryChannelDividendDetail', params).then((res) => {
    //     if (res.code !== 0) {
    //       this.userAuthorized = false;
    //       this.$message.error(res.msg);
    //       return;
    //     }
    //     this.userAuthorized = true;
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
  @import '@/assets/css/variables.scss';

  .banner {
    width: 100%;
    min-width: 1380px;
    min-height: 88vh;
  }

  .banner {
    position: relative;
    background: linear-gradient(to right, RGBA(59, 89, 217, 1.00), RGBA(30, 70, 200, 1.00));
    background-size: cover;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;

    .bannerWrap {
      max-width: 1332px;
      width: 100%;
      margin: auto;
    }

    .mainView{
      min-width: 1260px;
    }

    .newdexTip{
      // margin-left: 12%;
      width: 700px;
    }

    .bannerImg{
      position: relative;
      min-height: 500px;
      max-height: 100%;
      max-width: 100%;
      min-width: 500px;
      // background-image: url('../../');
      background-repeat: no-repeat;
      background-size: 100%;
      // margin-right: 10%;

      .video-btn {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        background: url('../../assets/img/videoplay.png');
        background-size: cover;
        cursor: pointer;
      }
    }

    .memberImg {
      background: none !important;
    }

    .bannerBottom{
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      bottom: 40px;
      height: 379px;
      left: 0px;
      background-size: 100% 100%;
      background-image: url('../../assets/img/mainIndex/bannerBottom.png');
    }

    .pdtop30{
      padding-top: 40px;
    }

    .mainTitle {
      // padding-left: 5px;
      word-wrap: break-word;
      word-break: normal;
      font-size: 32px;
      text-align: left;
      // font-weight: 300;
      // padding-top: 7px;
      // line-height: 65px;
      padding: 10px 0;
    }

    .subTitle {
      text-align: left;
      padding-left: 1px;
      // font-weight: 200;
      // padding-top: 5px;
      font-size: 17px;
      line-height: 30px;
    }

    .bannerBtn{
      padding: 10px 35px;
      background: transparent;
      outline: none;
      width: 180px;
      font-size: 15px;
      // font-weight: 200;
      border: 1px solid white;
      border-radius: 5px;
      margin: 8px auto;
      color: white;
      cursor: pointer;
    }

    .bannerBtn:hover{
      background: #fff;
      color: #278EDA
    }

    .memberBtn {
      color: #FFD9AD;
      border: 1px solid #FFD9AD;
      &:hover {
        background: #FFD9AD;
        color: #4e4e4e;
      }
    }

    .smallImg {
      @include flexbox();

      a {
        @include flex(1);
        display: inline-block;
        width: 250px;
        margin: 0px 20px 0px 0px;
      }

      a:last-child {
        margin: 0px;
      }

      img {
        width: 100%;
      }
    }

    /deep/ .el-carousel__indicators {}
  }

  .theme-1B1D27 #app {
    .partnerMain {
      background: transparent;

      .contentTop {
        .datebox {
          background-color: #152247 !important;
        }

        .datebox {
          border: 1px solid #4e5b85 !important
        }
      }

      .tablebox {
        border: 1px solid #4e5b85 !important;

        /deep/ .el-table__body-wrapper .cell {
          color: RGBA(197, 206, 228, 0.5) !important;
        }

        /deep/ .has-gutter .cell {
          color: RGBA(197, 206, 228, 1) !important;
        }
      }
    }
  }

  @media screen and (max-width: 1450px) {
    .partnerMain {
      .form-item-min /deep/.el-form-item__content {
      }
      .partnerLoginedMain {
        padding: 30px 20px;
      }
    }
  }
</style>
